<template>
  <div>
    <div class="search">
        <!-- <el-date-picker
      v-model="value"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      placeholder="选择时间范围"
      default-time="['8:30:00', '08:29:00']">
    </el-date-picker>
    <el-button @click="handleClickSearch">查询</el-button> -->
            <el-form v-model="searchList">
              <label>开始时间:</label>
              <el-date-picker
                v-model="startDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
              <label>结束时间:</label>
              <el-date-picker
                v-model="endDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
               <el-button @click="handleClickSearch"><i class="el-icon-search"></i>查询</el-button>
          </el-form>
    </div>

    <highcharts :options="options"  ref="highCharts" :style="{height:tableHeight+'px'}"></highcharts>
  </div>
</template>
<script>
import * as defect from '@/api/report/defectDistribution'
var moment = require('moment');
var Highcharts = require('highcharts');
export default {
  name: 'defectDistribution',  //成品缺陷分布
  data () {
    return {
      startDate: '',
      endDate: '',
      searchList:{startDate:'',endDate:''},
      value:[],
      search:{ startDate:'', endDate:'' },
      options: {
        credits:{
            enabled: false // 禁用版权信息
        },
        chart: {
            backgroundColor: 'rgba(0,0,0,0)',
            type: 'pie',
        },
        title: {
            text: ' 缺陷分布',
            align:'center',
            verticalAlign:'middle',
            y: -20,
            style: {
                color: '#000',
                fontSize: "40px",
                fontWeight: "blod"
            }
        },
        subtitle: {
            text: '不合格片总数:',
            align:'center',
            verticalAlign:'middle',
            y: 25,
            style: {
                color: '#000',
                fontSize: "2.5em",
                fontWeight: "blod",
            }

        },
        tooltip: {
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'

        },
        plotOptions: {
            pie: {
                borderColor: 'transparent',
                allowPointSelect: true,
                cursor: 'pointer',
                /*dataLabels: {
                    enabled: false, //不显示折线和文字
                },*/
                dataLabels: {
                    connectorWidth: 3,
                    enabled: true,
                   /* format: '<b>{point.name}</b>: {point.percentage:.1f} %',*/
                    formatter: function() {
                        return '<p style="color:'+ this.color+'">'+ this.point.name +'</p>: '+ Highcharts.numberFormat(this.percentage, 2) +'% ('+
                            Highcharts.numberFormat(this.y, 0, ',') +' 片)';
                    },
                    /*formatter:function(){
                        return  '<p style="color:'+ this.color+'">'+ this.point.name +'</p><br><p style="color:'+ this.color+'">'+ (this.percentage).toFixed(1)+'%</p>';
                    },*/
                    /*formatter: function() {
                        if(this.point.name == '初级'){
                            return '<span style="color:#95CEFF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '中级'){
                            return '<span style="color:#fdd67f">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '高级'){
                            return '<span style="color:#ffaca8">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '不分等级'){
                            return '<span style="color:#64bcec">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }
                    },*/
                    style: {
                        fontSize: '2.2em',
                        fontWeight: 'normal',
                        textOutline: 'none',
                    }
                }
            }
        },
        colors: ['#4981DB', '#F7AB5B', '#00EBAF', '#4BB8EB', '#16AAAF', '#D7E584', '#B9B9B9','#00E2E9'],
        series: [{
         innerSize: '70%',
         data: []
         }]
    }
    }
  },

  computed: {
      tableHeight () {
          const filterHeight = 0
          var tableHeight = this.getTableHeight(filterHeight)+28
          return tableHeight;
      }
  },
  mounted () {
    this.startDate = moment.utc(moment().subtract(9, 'days').format('YYYY-MM-DD 00:30:00')).format();
    this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
    this.handleClickSearch();
  },
  methods: {
    handleClickSearch () {
      if( !this.startDate == ''){
        this.searchList.startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
      }else{
        this.searchList.startDate = ''
      }
      if(!this.endDate == ''){
        this.searchList.endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
      }else{
        this.searchList.endDate = ''
      }
      this.fetchDate()
    },
    messagel () {
      this.$message({
        type:'warning',
        message:'查询开始时间为: 当前时间向前推9天。查询结束时间为: 当前时间。',
        duration:5000,
        showClose:true
      })
    },
    fetchDate () {
      /*this.search.earlyDate = moment(this.searchList.startDate).format('YYYY-MM-DD HH:mm:ss');
      this.search.lateDate = moment(this.searchList.endDate).format('YYYY-MM-DD HH:mm:ss');*/
        defect.defectDistribution(this.searchList).then(res => {
            const { msg } = res
            console.log(msg)
            if( Object.keys(msg).length === 0) {
              this.$message.error('该日期查询条件下，无数据返回')
              msg['不合格片数'] = 0
            }
              const leemsg = [
                      ['TTV',   +msg['TTVnum']||0],
                      ['崩',    +msg['崩num']||0],
                      ['线痕',   +msg['线痕num']||0],
                      ['缺口',   +msg['缺口num']||0],
                      ['脏',   +msg['脏num']||0],
                      ['花',   +msg['花num']||0],
                      ['其他',   +msg['其他num']||0]
                    ]
              this.$refs.highCharts.chart.update({
                    series:[{
                      data: leemsg
                    }],
                    subtitle:{
                      text: '不合格片总数:' + +msg['不合格片数']
                    }

	            })



        })
    }
  },
  created () {
   /* this.searchList.startDate = moment().subtract(9, 'days').format('YYYY-MM-DD 08:30:00');
    this.searchList.endDate = moment().format('YYYY-MM-DD 08:30:00');
    this.fetchDate();
    this.messagel();*/
  }
}
</script>
<style scoped>
.search{
  margin-top:20px;
  margin-left: 20px;
}
.search label{
  font-size: 16px;
}
</style>


